<template>
  <view class="page">
    <view class="input">
      <view class="input-wrapper" style="border-color: #fff">
        <view class="input-label">基地名称</view>
        <input class="input-put" placeholder="榆阳基地" />
        <image
          style="opacity: 0"
          class="input-icon"
          :src="require('@/static/img/arrows-right.png')"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="my-info-panel">
      <view class="userinfo">
        <image
          class="userinfo-pic"
          src="https://img1.baidu.com/it/u=898692534,2766260827&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1688230800&t=37b2de32b5260b8467dba333e92c49c5"
        ></image>
        <view>
          <view class="userinfo-name">用户名</view>
          <view class="userinfo-account">账号：1231346</view>
        </view>
      </view>
      <image
        class="info-panel-pic"
        mode="widthFix"
        :src="require('@/static/img/info-panel-pic.png')"
      ></image>
    </view>
    <view class="input" v-for="(item, index) in 5" :key="index">
      <view class="input-wrapper">
        <view class="input-label">基地名称</view>
        <input class="input-put" placeholder="榆阳基地" />
        <image
          style="opacity: 0"
          class="input-icon"
          :src="require('@/static/img/arrows-right.png')"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="btn-box">
      <button class="btn">
        <text class="btn-text" style="color: #fff">提交</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    onDiscern() {
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera", "album"], //从相册选择
        success: function (res) {
          console.log(res.tempFilePaths[0]);
          uni.navigateTo({
            url: "/pages/discern/recognition",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #f6f6f6;
}
.input {
  background: #fff;
  padding: 0 53rpx;

  &-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #e9e9e9;
    padding: 33rpx 0;
  }
  &-label {
    font-weight: bold;
    font-size: 26rpx;
    color: #202020;
  }
  &-put {
    flex: 1;
    font-size: 26rpx;
    text-align: right;
  }
  &-icon {
    width: 21rpx;
    height: 21rpx;
    margin-left: 5rpx;
  }
}
.my-info-panel {
  position: relative;
  width: 690rpx;
  height: 175rpx;
  background: #1ac678;
  opacity: 1;
  margin: 20rpx auto;
  border-radius: 20rpx;
}
.info-panel-pic {
  position: absolute;
  width: 138rpx;
  bottom: 10rpx;
  right: 10rpx;
}
.userinfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 32rpx 42rpx;
  margin-bottom: 70rpx;
  &-pic {
    width: 114rpx;
    height: 114rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 70rpx;
    margin-right: 46rpx;
  }
  &-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
  &-account {
    font-size: 21rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
.btn-box {
  position: fixed;
  left: 0;
  bottom: 33rpx;
  width: 100%;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
